<template>
  <table class="table w-full text-center">
    <thead>
      <tr>
        <th></th>
        <th>歌曲名</th>
        <th>歌手</th>
        <th>专辑</th>
      </tr>
    </thead>
    <tbody>
      <tr
        class="hover cursor-pointer w-full overflow-hidden"
        v-for="(item, index) in songList"
        :key="item.id"
        :class="{ active: tag === index }"
      >
        <th class="flex items-center">
          <span class="pr-5">{{ index + 1 }}</span>
          <pause-one
            @click="pause"
            v-if="tag === item.id && onOff"
            theme="filled"
            size="30"
          />
          <play @click="clickPlay(item.id)" v-else theme="filled" size="30" />
          <video-two
            v-if="mvList.length"
            class="ml-6"
            @click="videoPlay(mvList[index].id)"
            theme="filled"
            size="30"
          />
        </th>
        <td>{{ item.name }}</td>
        <td>{{ item.ar[0].name }}</td>
        <td>{{ item.al.name }}</td>
      </tr>
    </tbody>
  </table>
</template>

<script setup lang="ts">
import { defineProps, toRefs, onMounted, ref } from "vue";
import { useRouter } from "vue-router";
import { Play, PauseOne, VideoTwo } from "@icon-park/vue-next";
import { useSongPlayStore } from "../../store/songPlay";
import { useSearchDetail } from "../../store/searchDetail";
const { tag, clickPlay, pause, playData, onOff } = toRefs(useSongPlayStore());
defineProps<{
  songList: any;
}>();
const { mvList } = toRefs(useSearchDetail());
const router = useRouter();
const videoPlay = (id: string | number) => {
  pause.value()
  router.push("videoPlay?id=" + id);
};
</script>

<style scoped></style>
